
<template>
  <div>

    <template v-if="size=='big'">
      <div :class="['til',cls]">
        <span class="title">{{title}}</span>
        <span v-if="!noarrow">>></span>
      </div>
    </template>

    <template v-if="size=='s'">
      <div class="ht_small_box">
        <div class="ht_small_box_l">
          <span class="hsb_title">{{title}}</span>
          <span> / </span>
          <span class="hsb_letter">{{letter}}</span>
        </div>
        <div class="ht_small_box_r"></div>
      </div>
    </template>

    <template v-if="size=='gray'">
      <div :class="['til',cls]">
        <span class="title">{{title}}</span>
        <span>>></span>
      </div>
    </template>

  </div>
  
</template>

<script>
export default {
  name: 'HomeTitle',
  props: {
    title: String,//标题
    cls: String,//class 名称
    noarrow: String,//无箭头
    size: String,//尺寸
    letter: String,//字母
  }
}
</script>

<style scoped lang="scss">
.til{
  color:#ffffff;padding:0 10px;margin-bottom:10px;height:26px;display:flex;justify-content: space-between;align-items: center;background: -webkit-linear-gradient(top, #67B3E2 0%,#125E97 100%);
  .title{
    font-size:12px;font-weight:600
  }
}
.huomiao{
  .title{
    background: url(../assets/h_huomiao.png) no-repeat;
    background-position: 0 center;
    padding-left: 17px;
  }
}
.xiangmu{
  .title{
    background: url(../assets/xiangmu.png) no-repeat;
    background-size: 12px 12px;
    background-position: 0 center;
    padding-left: 17px;
  }
}
.tuijian{
  .title{
    background: url(../assets/h_tuijian.png) no-repeat;
    background-size: 14px 14px;
    background-position: 0 center;
    padding-left: 21px;
  }
}
.duoxuanti{
  .title{
    background: url(../assets/h_duoxuanti.png) no-repeat;
    background-size: 15px 15px;
    background-position: 0 center;
    padding-left: 21px;
  }
}
.isvip{
  .title{
    background: url(../assets/h_title_VIP.png) no-repeat;
    background-size: 13px 11px;
    background-position: 0 center;
    padding-left: 19px;
  }
}


// 样式二
.ht_small_box{
  display: flex;
  align-items: flex-end;
}
.ht_small_box_l{
  color: #333333;
  flex-shrink: 0;  
  margin-right: 2px;
}
.ht_small_box_r{
  height: 10px;
  position: relative;
  flex: 1;
  border-bottom: 1px solid #898989;
  background: url(../assets/h_small_arrow.png) no-repeat;
  background-size: 12px 6px;
  background-position: 100% 3px;
}
.hsb_title{
  display: inline-block;
  padding-left: 12px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  border-left: 2px solid #2775AB;
}
.hsb_letter{
  font-size: 12px;
}



// 样式三
.graybg{
  padding-left: 10px;
  background: linear-gradient(0deg, #F7F7F7, #E0E0E0);  
  color: #333333;
  height: 36px;
  line-height: 36px;
  font-weight: bold;
  .title{
    line-height: 1.1;
    padding-left: 7px;
    font-size:16px;    
    border-left: 2px solid #333333;
  }
}
</style>
